<template>
	<view class="report-form">
		<!-- 收益报表 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">收益报表</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
		>
			<view class="w-100 bg-ff b-box d-flex flex-r ali-i-c just-c" style="margin-bottom: 20rpx;">
				<view class="d-flex flex-r ali-i-c just-c b-box bg-ff" style="height: 92rpx;width: 600rpx;">
					<u-tabs
						:list="TabList"
						lineColor="#FFD300"
						@click="tabsClick"
						@change="tabsClick"
						:inactiveStyle="{
							color: '#666666',
							fontSize: '32rpx',
							fontWeight: '400',
							fontFamily: 'PingFang SC'
						}"
						:activeStyle="{
							color: '#262626',
							fontSize: '32rpx',
							fontWeight: '500',
							fontFamily: 'PingFang SC'
						}"
						lineWidth="40rpx"
						:lineBottom="'12rpx'"
						:itemStyle="{
							height: '88rpx',
							width: '110rpx',
							backgroundColor: 'rgba(255,255,255,0)'
						}"
						:current="TabCurrent"
						lineHeight="6rpx"
					></u-tabs>
				</view>
			</view>
			<!-- list -->
			<view :style="{ height: listHeight }">
				<swiper
					@animationfinish="swiperChange"
					v-if="listHeight"
					:style="{ height: listHeight, width: '100%' }"
					width="100%"
					:skip-hidden-item-layout="false"
					:height="listHeight"
					bgColor="#F7F7F7"
					:radius="0"
					:current="TabCurrent"
					easing-function="easeInOutCubic"
					:disable-touch="false"
				>
					<swiper-item>
						<scroll-view
							:style="{ height: listHeight }"
							scroll-y="true"
							v-if="listHeight"
							:refresher-enabled="true"
							:refresher-threshold="45"
							enable-flex="true"
							refresher-default-style="black"
							:refresher-triggered="refresher_triggered0"
							refresher-background="#f7f7f7"
							@refresherrefresh="refresherrefresh"
							:lower-threshold="50"
							@scrolltolower="scrolltolower"
						>
							<view
								class=" d-flex flex-c just-s ali-i-c b-box bg-ff"
								:style="{ height: listHeight }"
							>
								<view
									class="w-750 b-box"
									style="padding: 32rpx 40rpx 0rpx;"
									v-if="dataList.dataList0"
								>
									<view
										class="d-flex flex-r ali-i-c just-sw w-100"
										style="margin-bottom: 20rpx;"
										v-for="(item, index) of dataList.dataList0"
										:key="index"
									>
										<text class="fw-400 c-000 pf-sc fz-32">{{ item.time }}</text>
										<text class="fw-400 c-000 pf-sc fz-32 po-re" style="right: 30rpx;">
											{{ item.num }}单
										</text>
										<text class="fw-400 c-000 pf-sc fz-32">￥{{ item.money }}</text>
									</view>
								</view>
								<!-- 空状态 -->
								<view
									class=" d-flex flex-c ali-i-c just-c"
									:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
									v-else
								>
									<text
										v-if="dataList.requestStatus0"
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										数据为空
									</text>
									<text
										v-else
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										加载中...
									</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view
							:style="{ height: listHeight }"
							scroll-y="true"
							v-if="listHeight"
							:refresher-enabled="true"
							:refresher-threshold="45"
							enable-flex="true"
							refresher-default-style="black"
							:refresher-triggered="refresher_triggered1"
							refresher-background="#f7f7f7"
							@refresherrefresh="refresherrefresh"
							:lower-threshold="50"
							@scrolltolower="scrolltolower"
						>
							<view class=" d-flex flex-c just-s ali-i-c bg-ff" :style="{ height: listHeight }">
								<view
									class="w-750 b-box"
									style="padding: 32rpx 40rpx 0rpx;"
									v-if="dataList.dataList1"
								>
									<view
										class="d-flex flex-r ali-i-c just-sw w-100"
										style="margin-bottom: 20rpx;"
										v-for="(item, index) of dataList.dataList1"
										:key="index"
									>
										<text class="fw-400 c-000 pf-sc fz-32">{{ item.time}}</text>
										<text class="fw-400 c-000 pf-sc fz-32 po-re" style="right: 30rpx;">
											{{ item.num }}单
										</text>
										<text class="fw-400 c-000 pf-sc fz-32">￥{{ item.money }}</text>
									</view>
								</view>
								<!-- 空状态 -->
								<view
									class=" d-flex flex-c ali-i-c just-c"
									:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
									v-else
								>
									<text
										v-if="dataList.requestStatus1"
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										数据为空
									</text>
									<text
										v-else
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										加载中...
									</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view
							:style="{ height: listHeight }"
							scroll-y="true"
							enable-flex="true"
							:refresher-enabled="true"
							:refresher-threshold="45"
							v-if="listHeight"
							refresher-default-style="black"
							:refresher-triggered="refresher_triggered2"
							refresher-background="#f7f7f7"
							@refresherrefresh="refresherrefresh"
							:lower-threshold="50"
							@scrolltolower="scrolltolower"
						>
							<view class=" d-flex flex-c just-s ali-i-c bg-ff" :style="{ height: listHeight }">
								<view
									class="w-750 b-box"
									style="padding: 32rpx 40rpx 0rpx;"
									v-if="dataList.dataList2"
								>
									<view
										class="d-flex flex-r ali-i-c just-sw w-100"
										style="margin-bottom: 20rpx;"
										v-for="(item, index) of dataList.dataList2"
										:key="index"
									>
										<text class="fw-400 c-000 pf-sc fz-32">{{ item.time }}</text>
										<text class="fw-400 c-000 pf-sc fz-32 po-re" style="right: 30rpx;">
											{{ item.num }}单
										</text>
										<text class="fw-400 c-000 pf-sc fz-32">￥{{ item.money }}</text>
									</view>
								</view>
								<!-- 空状态 -->
								<view
									class=" d-flex flex-c ali-i-c just-c"
									:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
									v-else
								>
									<text
										v-if="dataList.requestStatus2"
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										数据为空
									</text>
									<text
										v-else
										style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;"
									>
										加载中...
									</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
import {incomelog} from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Utabs from '../components/uview-ui/components/u-tabs/u-tabs.vue';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
export default {
	components: {
		'u-tabs': Utabs,
		'u-navbar': Unavbar
	},
	data() {
		return {
			containerHeight: '',
			listHeight: '',
			TabList: [
				{
					id: 0,
					name: '日报'
				},
				{
					id: 1,
					name: '月报'
				},
				{
					id: 2,
					name: '年报'
				}
			],
			TabCurrent: 0, //当前选中标签的索引
			refresher_triggered0: false, //下拉刷新
			refresher_triggered1: false,
			refresher_triggered2: false,
			refresher_triggered0_: false,
			refresher_triggered1_: false,
			refresher_triggered2_: false,
			dataList: {
				dataList0: [],
				dataList1: [],
				dataList2: [],
				requestStatus0: false,
				requestStatus1: false,
				requestStatus2: false
			},
			FalseData: {
				dataList0: [],
				dataList1: [],
				dataList2: []
			}
		};
	},
	methods: {
		ClearRefre_() {
			// for (let index = 0; index < this.TabList.length; index++) {
			// 	this.$set(this, `refresher_triggered${index}_`, false);
			// }
		},
		ReauestMethod() {
			// let TabCurrent = parseInt(this.TabCurrent);
			// console.log('ReauestMethod', TabCurrent);
			// let list = this.dataList;
			// let FalseData = this.FalseData;
			// console.log(FalseData);
			// console.log(list);
			//模拟请求
			/*uni.$u.sleep(1000).then(res => {
				switch (TabCurrent) {
					case 0:
						list[`dataList${TabCurrent}`] = this.$set(
							list,
							`dataList${TabCurrent}`,
							list.dataList0.concat(FalseData.dataList0)
						);
						break;
					case 1:
						list[`dataList${TabCurrent}`] = this.$set(
							list,
							`dataList${TabCurrent}`,
							list.dataList1.concat(FalseData.dataList1)
						);
						break;
					case 2:
						list[`dataList${TabCurrent}`] = this.$set(
							list,
							`dataList${TabCurrent}`,
							list.dataList2.concat(FalseData.dataList2)
						);
						break;
					default:
						break;
				}
				console.log('asdfg', list[`dataList${TabCurrent}`]);
				this[`refresher_triggered${TabCurrent}_`] = false;
				this[`refresher_triggered${TabCurrent}`] = false;
			});*/
		let params={
			token:uni.getStorageSync('user').token,
			type:1
		}
		incomelog(params).then((res)=>{
			console.log(res);
			this.dataList.dataList0=res.data.data
		})
		},
		refresherrefresh() {
			//下拉刷新
			let TabCurrent = parseInt(this.TabCurrent);
			let list = this.dataList;
			if (this[`refresher_triggered${TabCurrent}_`]) return;
			this[`refresher_triggered${TabCurrent}_`] = true;
			if (!this[`refresher_triggered${TabCurrent}`]) {
				this[`refresher_triggered${TabCurrent}`] = true;
				list[`dataList${TabCurrent}`] = this.$set(list, `dataList${TabCurrent}`, []);
				list[`requestStatus${TabCurrent}`] = this.$set(list, `requestStatus${TabCurrent}`, false);
				/**
				 * request
				 * */
				this.ReauestMethod();
			}
		},
		// 上拉加载
		scrolltolower() {
			/**
			 * request
			 * */
		},
		swiperChange(index) {
			//一级 窗口滑动动画结束后
			this.TabCurrent = parseInt(index.detail.current);
			this.ClearRefre_();
			/**
			 * request
			 * */
			// let list = this.dataList;
			// if (list[`dataList${this.TabCurrent}`]['length'] <= 0) {
			// 	this.ReauestMethod();
			// }
		},
		tabsClick(index) {
			this.TabCurrent = index.id || index.index;
			this.ClearRefre_();
			let params={
				token:uni.getStorageSync('user').token,
				type:index.id+1
			}
			incomelog(params).then((res)=>{
			   if(index.id==1){
					 this.dataList.dataList1=res.data.data
				 }else if(index.id==2){
					 this.dataList.dataList2=res.data.data
				 }else{
					 this.dataList.dataList0=res.data.data
				 }
			})
			
			
		}
	},
	onReachBottom() {
		console.log('触底了');
	},
	onPullDownRefresh(){
		console.log('刷新了');
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.listHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('118rpx'), 'px');
		this.ReauestMethod();
	}
};
</script>

<style lang="scss">
.report-form {
}
</style>
